<template>
	<div class="room">
		<div class="roomvf" v-for="(room, index) in list" :key="index">
			<div class="room_name">
				<i class="el-icon-back" @click="goback">
				</i>
				{{ room.room_name }}
			</div>
			<div class="information">
				<div class="room_image">
					<el-carousel indicator-position="outside">
						<el-carousel-item v-for="(img1, index) in list1" :key="index">
							<h3>
								<img v-bind:src="img1.imgUrl" style="height: 100%; width: 100%;">
							</h3>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="infor">
					<div class="information1">
						<div class="information2">
							<div class="roominfotitle">是否有窗</div>
							<div class="roominforth">
								{{ room.isWindow ? '是' : '否' }}
							</div>
						</div>
						<div class="information2">
							<div class="roominfotitle">有无WIFI</div>
							<div class="roominforth">
								{{ room.is_wifi ? '是' : '否' }}
							</div>
						</div>
						<div class="information2">
							<div class="roominfotitle">是否有早餐</div>
							<div class="roominforth">
								{{ room.is_breakfast ? '是' : '否' }}
							</div>
						</div>
					</div>
					<div class="information1">
						<div class="information2">
							<div class="roominfotitle">面积</div>
							<div class="roominforth">
								{{ room.room_area }}（m²）
							</div>
						</div>
						<div class="information2">
							<div class="roominfotitle">价格</div>
							<div class="roominforth">
								{{ room.room_price }}元
							</div>
						</div>
						<div class="information2" v-for="(bed1, index) in list2" :key="index">
							<div class="roominfotitle">床型</div>
							<div class="roominforth">
								{{ bed1.bedShape }}
							</div>
							<div class="roominforth">
								{{ bed1.bedName }}
							</div>
						</div>
					</div>

					<div class="information1">
						<div class="information2">
							<div class="roominfotitle1">描述</div>
							<div class="roominforth1">
								{{ room.description }}
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="other">
			<div class="others"></div>
			<div class="others1">
				<div class="others2"></div>
				<div class="btn">
					<el-button @click="centerDialogVisible = true"
						style="width: 100%;height: 100%;text-align: center;align-items: center;background: #43E38B;">下单</el-button>
				</div>
			</div>
		</div>
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
			<span>下单成功</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
				<el-button @click="centerDialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<style scoped >
* {
	margin: 0;
	padding: 0;
}

.body {
	overflow: hidden;
}

.room {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.other {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: right;
	/* background: url("https://tse4-mm.cn.bing.net/th/id/OIP-C.ygDpQ7PNxTTJfJ6SF0hO4QHaEr?w=249&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7");
	background-repeat: no-repeat;
	background-size:cover; */
}

.others {
	width: 100%;
	height: 80%;
}

.others1 {
	width: 100%;
	height: 20%;
	display: flex;
	flex-direction: row;
}

.others2 {
	width: 90%;
	height: 100%;
}

.btn {
	width: 10%;
	height: 100%;
	display: flex;
	justify-content: right;
	text-align: center;
	align-items: center;

}


.roomvf {
	width: 100%;
	height: 100%;
}

.room_name {
	width: 100%;
	/* height: 5%; */
	position: relative;
	text-align: center;
	font-size: 50px;
	font-weight: 400;
	background: #F3F3F6;
}

.information {
	width: 100%;
	/* height: 20%; */
	display: flex;

	flex-direction: row;
	border-top: 1px solid black;
	border-bottom: 1px solid black;


}


.image {
	width: 100%;
	height: 100%;
	position: relative;

}

.room_image {
	width: 30%;
	border-right: 1px solid #475669;

	object-fit: cover;
}

.infor {

	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.information1 {
	height: 33%;
	position: relative;
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid black;
}

.information2 {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: baseline;
	border-right: 1px solid black;
}

.roominfotitle {
	/* height: 50%; */
	border-bottom: 2px solid antiquewhite;
}

.roominfoth {
	/* height: 50% */
}

.roominfotitle1 {
	/* height: 20%; */
	border-bottom: 2px solid antiquewhite;
}

.roominfoth1 {
	/* height: 80%; */
}

.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}
</style>
<script>


import RoomApi from "@/api/apiLiu/Room_request"
export default {
	data() {
		return {
			centerDialogVisible: false,
			list2: [],
			searchMap2: {
				bed_id: 1,
				bedName: null,
				bedShape: null,
			},
			pojo2: {
				bed_id: null,
				bedName: null,
				bedShape: null,
			},
			list1: [],
			searchMap1: {
				room_id: 1,
				imgUrl: null,
			},
			pojo1: {
				room_id: null,
				imgUrl: null,
			},
			list: [],
			searchMap: {
				room_id: null,
				bed_id: null,
				room_name: null,
				hotel_id: null,
				room_price: null,
				room_area: null,
				is_window: null,
				is_wifi: null,
				is_breakfast: null,
				description: null,
				status: null,
				pageNum: 1,
				pageSize: 4,
			},
			count: 20,
			pojo: {
				room_id: null,
				bed_id: null,
				room_name: null,
				room_price: null,
				room_area: null,
				is_window: null,
				is_wifi: null,
				is_breakfast: null,
				description: null,
				status: null,

			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数
		this.searchMap.room_id = this.$route.params.room_id;
		this.searchMap.hotel_id = this.$route.params.hotel_id;
		// console.log("详细房间信息");
		// console.log(this.searchMap.room_id);
		this.fetchData();
		this.fetchData1();
		this.fetchData2();
	},
	methods: {
		goback() {
			console.log(this.searchMap.hotel_id);
			this.$router.push(
				{
					name: "hotel_lhj",
					params: { hotel_id: this.searchMap.hotel_id }
				}
			)
		},
		add() {
			const room = {
				hotel_id: null,
				room_id: null,
				bed_id: null,
				room_name: null,
				room_price: null,
				room_area: null,
				is_window: null,
				is_wifi: null,
				is_breakfast: null,
				description: null,
				status: null,

				pageNum: 1,
				pageSize: 1,
			}
			this.list.unshift(room)
		},
		add1() {
			const img1 = {
				room_id: null,
				imgUrl: null,
			}
			this.list1.unshift(img1)
		},
		add2() {
			const bed1 = {
				bed_id: null,
				bedName: null,
				bedShape: null,
			}
			this.list2.unshift(bed1)
		},
		open(record, type) {
			console.log(record, type);
		},
		fetchData() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			RoomApi.selectList(this.searchMap).then(response => {
				//  //把返回的结果赋值模型
				this.list = response.data.data
				this.count = response.data.count
			})
		},
		fetchData1() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			RoomApi.searchroom(this.searchMap.room_id).then(response => {
				//  //把返回的结果赋值模型
				this.list1 = response.data.data
			})
		},
		fetchData2() {
			// console.log("发起请求");
			// console.log(this.searchMap.room_id);
			//编写一个方法请求后端的接口，把返回的数据赋值list
			RoomApi.searchbed(this.searchMap.room_id).then(response => {
				//  //把返回的结果赋值模型
				this.list2 = response.data.data
			})
		},
		//当分页大小产生变化的时候调用该方法
		sizeData(size) {
			this.searchMap.pageSize = size
			this.fetchData()
		},
		pageData(page) {
			this.searchMap.pageNum = page
			this.fetchData()
		},
		//新增和修改使用同一个函数打开弹窗，区别是新增没有id
		handleEdit(id) {
			this.id = id
			//打开弹窗
			this.dialogFormVisible = true
			if (id !== '') {
				//根据id查询数据绑定到模型上面
				RoomApi.selectByRoom_id(id).then(reponse => {
					this.pojo = reponse.data.data;
				})
			} else {
				this.pojo = {
					room_id: null,
					bed_id: null,
					room_name: null,
					room_price: null,
					room_area: null,
					is_window: null,
					is_wifi: null,
					is_breakfast: null,
					description: null,
					status: null,
				} //清空数据
			}
		},
		//新增和修改保存数据的方法
		handleSave() {
			if (this.id === null || this.id === '') {
				RoomApi.insert(this.pojo).then(reponse => {
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false
				})
			} else {
				RoomApi.insertOrUpdate(this.pojo).then(reponse => {
					//新增或者修改成功
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false

				})
			}
		},
		handleDelete(id) {
			this.$confirm('您确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				RoomApi.deleteByRoom_id(id).then(reponse => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.fetchData()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	}
}

</script>